<template>
  <div class="resource-download">
    <nav-bar></nav-bar>
    <div class="page-main clearfix" v-loading.body="loading">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">
            推荐下载资源
          </div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="item,i in recomend" :key="i">
                <a :href="'#/resource/download/' + item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="page-right">
        <div class="xyd-container">
          <div class="bread">
            当前位置：{{source.cat}}-{{source.cat2}}-{{source.cat3}}
          </div>
          <div class="xyd-c-title clearfix">
            <span style="float:left;padding-left:10px;">
              {{source.title}}
            </span>
          </div>
          <div class="xyd-c-content">
            <div class="source-content clearfix">
              <ul class="info-left">
                <li>
                  <span>上传时间：{{source.create}}</span>
                  <span>最后更新：{{source.update}}</span>
                </li>
                <li>
                  <span>详细分类：{{source.cat}}</span>
                  <span>学科：{{source.cat3}}</span>
                </li>
                <li>
                  <span>资源版本：{{source.cat2}}</span>
                  <span>资源大小：{{source.size}}</span>
                </li>
                <li>
                  <span>资源格式：{{source.form}}</span>
                  <span>上传人：{{source.author}}</span>
                </li>
                <li>
                  <span>资源作者：{{source.author}}</span>
                  <span>下载点数：{{source.price}}{{source.type===0 ? '普通语点' : source.type===1 ? '钻石语点' : '语点'}}</span>
                </li>
              </ul>
              <div class="info-right">
                <div class="top">
                  <span>{{source.visit}}次浏览</span>
                  <span>{{source.download}}次下载</span>
                  <span>推荐指数：{{source.star}}</span>
                </div>
                <div class="btn-group">
                  <button class="orange-btn" @click="handleDownload(1)">vip下载</button>
                  <button class="green-btn" @click="handleDownload(0)">普通下载</button>
                  <div class="icon-group">
                    <a href="javascript:;" title="收藏" @click="handleCollect">
                      <i :class="source.collected ? 'xyd-collection_a' : 'xyd-collection2'"></i>
                    </a>
                    <a href="javascript:;" title="预览" @click="handlePreview">
                      <i class="xyd-preview2" ></i>
                    </a>
                    <a href="javascript:;" title="分享" @click="handleShare">
                      <i class="xyd-share2" ></i>
                    </a>
                  </div>
                  <input class="url" type="text" :id="'download_url_' + source.id" :value="appOrigin + '#/resource/download/' + source.id"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="xyd-container" style="margin-top:20px;">
          <div class="xyd-c-title clearfix">
            <span style="float:left;padding-left:10px;">
              资源评价
            </span>
          </div>
          <div class="xyd-c-content">
            <div class="comment-content clearfix">
              <div class="comment">
                <div class="percent">{{comment.count}}%</div>
                <div class="text">好评度</div>
              </div>
              <div class="rate-group">
                <div class="rate-container">
                  <div class="rate-value">
                    <div class="rate-content1" :style="comment.good + comment.mid + comment.bad === 0 ? 'width:0' : `width:${comment.good / (comment.good + comment.mid + comment.bad) * 138}px`"></div>
                  </div><span>好评（{{comment.good}}人）</span>
                </div>
                <div class="rate-container">
                  <div class="rate-value">
                    <div class="rate-content2" :style="comment.good + comment.mid + comment.bad === 0 ? 'width:0' : `width:${comment.mid / (comment.good + comment.mid + comment.bad) * 138}px`"></div>
                  </div><span>中评（{{comment.mid}}人）</span>
                </div>
                <div class="rate-container">
                  <div class="rate-value">
                    <div class="rate-content3" :style="comment.good + comment.mid + comment.bad === 0 ? 'width:0' : `width:${comment.bad / (comment.good + comment.mid + comment.bad) * 138}px`"></div>
                  </div><span>差评（{{comment.bad}}人）</span>
                </div>
              </div>
              <div class="notice clearfix">
                <label class="left-title">
                  规则：
                </label>
                <div class="right-content">
                  点击评论里的评分星星可对当前这个资源进行评价，每次评价和评论可获得1个普通点，每天最多可获得30个普通点
                </div>
              </div>
              <!-- <div class="btn-group">
                <button class="green-btn">我要评论</button>
              </div> -->
            </div>
          </div>
        </div>
        <div class="xyd-container page-bottom" style="margin-top:20px;">
          <div class="xyd-c-title clearfix">
            <ul class="tabs clearfix">
              <li :class="index === tab ? 'tab active' : 'tab'" v-for="tab,i in tabs" :key="i" @click="handleTab(tab)">
                {{tab}}
              </li>
            </ul>
          </div>
          <div class="xyd-c-content">
            <div v-if="index === tabs[0]" class="intro">{{source.title}}</div>
            <div v-if="index === tabs[1]">
              <ul>
                <li>评论</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="showDialog">
      <div class="dialog-container">
        <div class="money">
          <div class="normal">
            <div class="t">我的语点</div>
            <div class="b">{{$store.state.money.normal}}</div>
          </div>
          <div class="diamond">
            <div class="t">我的钻石语点</div>
            <div class="b">{{$store.state.money.diamond}}</div>
          </div>
        </div>
        <div class="notice">
          语点不足，请选择其他支付方式
        </div>
        <div class="radios">
          <el-radio-group v-model="pay">
            <el-radio class="ri" :label="1">{{ source.type === 0 ? '充值普通语点' : source.type === 1 ? '充值钻石语点' : '充值语点'  }}</el-radio>
            <el-radio class="ri" :label="2">支付宝支付</el-radio>
            <el-radio class="ri" :label="3">微信支付</el-radio>
          </el-radio-group>
        </div>
        <div class="btn-group">
          <button class="gray-btn">取消</button>
          <button class="common-btn">确定</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { download, getFile } from 'api/resource'
import { Loading } from 'element-ui'

export default {
  name: 'resource-download',
  components: {
    NavBar
  },
  data() {
    return {
      appOrigin: process.env.APP_ORIGIN,
      tabs: ['资源简介', '用户评论'],
      index: '资源简介',
      source: {},
      comment: {},
      recomend: [],
      showDialog: false,
      pay: '',
      loading: false
    };
  },
  created() {
    this.routerChange()
  },
  methods: {
    handleTab(tab) {
      this.index = tab
    },
    routerChange() {
      const { id } = this.$route.params
      this.loading = true
      download({
        sid: id
      })
      .then(res => {
        console.log(res)
        this.loading = false
        this.source = res.source
        this.comment = res.comment
        this.recomend = res.recomend
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handleDownload(dtype) {
      let TYPE
      if (this.source.type === 0) {
        TYPE = { normal: this.source.price }
      } else {
        TYPE = { diamond: this.source.price }
      }
      this.$store.dispatch('CheckMoney', TYPE)
      .then(res => {
        if (res) {
          const loadingInstance = Loading.service({ fullscreen: true, lock: true });
          getFile({
            sid: this.source.id,
            dtype
          })
          .then(res => {
            location.href = res.data
            loadingInstance.close();
          })
          .catch(err => {
            console.log(err)
            loadingInstance.close();
            if (err.msg === '您不是VIP用户，请使用普通下载!') {
              this.$confirm('您不是VIP用户，您可以选择现在去开通VIP，或选择普通下载?', '提示', {
                confirmButtonText: '立即开通',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$router.push('/vip')
              }).catch(() => {
                console.log('取消开通')
              })
            } else {
              this.$message({
                message: err.msg,
                type: 'error'
              })
            }
          })
        } else {
          console.log('语点不足')
          this.showDialog = true
        }
      })
      .catch(err => {
        console.log('获取不了财务信息：' + err)
      })
    },
    handleCollect() {
      const { id, catid, title, price } = this.source
      this.source.collected = true
      collect({
        rsid: id,
        cat: catid,
        rsname: title,
        price
      })
      .then(res => console.log(res))
      .catch(() => {
        this.source.collected = false
      })
    },
    handlePreview() {
      // this.$emit('preview')
      this.$router.push('/resource/preview/' + this.source.id)
    },
    handleShare() {
      const did = document.getElementById('download_url_' + this.source.id)
      did.select()
      document.execCommand('copy', true)
      this.$message({
        message: '资源链接已成功复制到剪贴板，快去分享吧~',
        type: 'success'
      })
    }
  },
  watch: {
    '$route'(to, from) {
      this.routerChange()
    }
  }
};
</script>

<style lang="scss" scoped>
.resource-download{
  .page-left{
    .xyd-container{
      .xyd-c-content{
        padding: 10px;
        line-height: 30px;
        >ul{
          >li{
            line-height: 30px;
            width: 100%;
            word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
            overflow: hidden;//溢出隐藏
            text-overflow: ellipsis;//省略号
            white-space: nowrap;//不换行
            >a{
              &:hover{
                text-decoration: underline;
                color: #00A2EA;
              }
            }
          }
        }
      }
    }
  }
  .bread{
    padding: 15px;
  }
  .tabs{
    .tab{
      width: 104px;
      float: left;
      cursor: pointer;
      &:hover{
        color: #00A2EA;
      }
    }
    .tab.active{
      background-color: #00A2EA;
      color: #fff;
      &:hover{
        color: #fff;
      }
    }
  }
  .source-content{
    padding: 0 35px;
    .info-left{
      float: left;
      width: 50%;
      >li{
        &:last-child{
          border: none;
        }
        width: 100%;
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e5e6e7;
        >span{
          color: #999;
          float: left;
          display: inline-block;
          width: 50%;
        }
      }
    }
    .info-right{
      float: left;
      width: 50%;
      >.top{
        width: 100%;
        overflow: hidden;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e5e6e7;
        >span{
          color: #999;
          float: left;
          display: inline-block;
          width: 33.3%;
        }
      }
      >.btn-group{
        width: 120px;
        margin: 0 auto;
        margin-top: 40px;
        .orange-btn{
          height: 40px;
          font-size: 16px;
        }
        .green-btn{
          margin-top: 20px;
          height: 40px;
          font-size: 16px;
        }
        .icon-group{
          margin-top: 10px;
          display: flex;
          justify-content: space-around;
        }
        .url{
          opacity: 0;
          position: absolute;
          z-index: -1;
        }
      }
    }
  }
  .comment-content{
    padding: 15px 30px;
    .comment{
      padding: 18px 0;
      float: left;
      width: 100px;
      .percent{
        color: #FE834D;
        text-align: center;
        font-size: 36px;
      }
      .text{
        text-align: center;
        color: #999;
      }
    }
    .rate-group{
      float: left;
      .rate-container{
        margin: 10px 0;
        .rate-value{
          vertical-align: middle;
          display: inline-block;
          height: 24px;
          width: 138px;
          border: 1px solid #e5e6e7;
          margin-right: 15px;
          .rate-content1{
            background-color: #43C97C;
            height: 100%;
          }
          .rate-content2{
            background-color: #41B7EF;
            height: 100%;
          }
          .rate-content3{
            background-color: #999;
            height: 100%;
          }
        }
      }
    }
    .notice{
      float: left;
      padding: 40px 30px;
      .left-title{
        float: left;
        display: block;
        text-align: right;
        width: 70px;
      }
      .right-content{
        float: left;
        display: block;
        text-align: left;
        color: #999;
        font-size: 12px;
        width: 400px;
      }
    }
    // .btn-group{
    //   padding: 38px 0;
    //   float: right;
    //   .green-btn{
    //     width: 120px;
    //     height: 44px;
    //   }
    // }
  }
  .page-bottom{
    .xyd-c-content{
      padding: 20px;
    }
  }
}
.dialog-container{
  .money{
    width: 570px;
    margin: 0 auto;
    overflow: hidden;
    color: #fff;
    .normal{
      float: left;
      width: 275px;
      height: 150px;
      margin-right: 20px;
      background-color: #46B7AF;
      padding: 45px 0;
      text-align: center;
      .t{

      }
      .b{
        font-size: 30px;
      }
    }
    .diamond{
      float: left;
      width: 275px;
      height: 150px;
      background-color: #F8CB00;
      padding: 45px 0;
      text-align: center;
      .b{
        font-size: 30px;
      }
    }
  }
  .notice{
    color: #f00;
    font-size: 12px;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid #e5e6e7;
  }
  .radios{
    padding: 20px 0;
    .ri{
      display: block;
      line-height: 30px;
      margin-left: 0;
    }
  }
  .btn-group{
    width: 360px;
    margin: 0 auto;
    overflow: hidden;
    .gray-btn{
      margin-right: 38px;
    }
    >button{
      float: left;
      height: 38px;
      width: 161px;
    }
  }
}
</style>